import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  Image,
} from 'react-native';

import { Icon } from 'react-native-elements';

import colorConfig from '../../configs/colorConfig';

const { defaultColor } = colorConfig;

// only dot
// default to the top right of the father component
// it can displayed as a button
const Dot = ({
  color = defaultColor,
  size = 10,
  topRight = false,
  topLeft = false,
  style,
  onPress,
  activeOpacity = 0.8,
}) => {
  const Component = onPress ? TouchableOpacity : View;
  const commonProps = {
    style: [
      {
        width: size,
        height: size,
        borderRadius: 0.5 * size,
        backgroundColor: color,
      },
      topRight && {
        position: 'absolute',
        top: 0,
        right: 0,
      },
      topLeft && {
        position: 'absolute',
        left: 0,
        right: 0,
      },
      style,
    ],
  };

  const touchableProps = onPress ? {
    onPress,
    activeOpacity,
  } : {};

  return (
    <Component
      {...commonProps}
      {...touchableProps}
    />
  );
};

// only display the number
const NumberChip = ({
  color = defaultColor,
  size = 22,
  topRight = false,
  topLeft = false,
  number = 0,
  max = 99,
  wrapperStyle,
  textStyle,
  onPress,
  activeOpacity = 0.8,
}) => {
  const Component = onPress ? TouchableOpacity : View;
  const commonProps = {
    style: [
      {
        width: size,
        height: size,
        borderRadius: 0.5 * size,
        backgroundColor: color,
        justifyContent: 'center',
        alignItems: 'center',
        flexWrap: 'nowrap',
      },
      topRight && {
        position: 'absolute',
        top: 0,
        right: 0,
      },
      topLeft && {
        position: 'absolute',
        left: 0,
        right: 0,
      },
      wrapperStyle,
    ],
  };

  const touchableProps = onPress ? {
    onPress,
    activeOpacity,
  } : {};
  return (
    <Component
      {...commonProps}
      {...touchableProps}>
      <Text
        style={[{
          color: '#fff',
          fontSize: 9,
        },
          textStyle,
        ]}>
        {(+number >= max) ? `${max}+` : number}
      </Text>
    </Component>
  );
};

// you can put image and or text, image will be round
const MediaChip = ({
  img,
  icon,
  text = '',
  color = '#eee',
  wrapperStyle,
  textStyle,
  onPress,
  activeOpacity = 0.8,
}) => {
  const Component = onPress ? TouchableOpacity : View;
  const commonProps = {
    style: [{
      flexDirection: 'row',
      alignItems: 'center',
      paddingVertical: 5,
      paddingHorizontal: 8,
      backgroundColor: color,
      borderRadius: 20,
    },
      wrapperStyle,
    ],
  };

  const touchableProps = onPress ? {
    onPress,
    activeOpacity,
  } : {};

  return (
    <Component
      {...commonProps}
      {...touchableProps}>
      {img &&
        <Image
          source={{
            uri: img,
          }}
          style={{
            width: 30,
            height: 30,
            borderRadius: 15,
          }}
        />
      }
      {icon &&
        <Icon
          size={25}
          color="#000"
          {...icon}
        />
      }
      <Text
        style={[
          (icon || img) && { marginLeft: 8 },
          textStyle,
        ]}>
        {text}
      </Text>
    </Component>
  );
};



export default {
  Dot,
  NumberChip,
  MediaChip,
};
